<template>
	<div class="setting-container">
		<h3>页面设置</h3>
		<el-form  :model="settingValue" size="mini">
			<el-form-item label="页面名称" prop="pageName">
				<el-input style="width: 280px" v-model="settingValue.pageName"></el-input>
			</el-form-item>
			<el-form-item label="页面类型" prop="pageType">
				<el-select v-model="settingValue.pageType">
					<el-option
						v-for="item in pageTypeDict"
						:key="item.value"
						:label="item.label"
						:value="item.value"/>
				</el-select>
			</el-form-item>
			<el-form-item label="背景色" prop="pageColor">
				<el-color-picker
					v-model="settingValue.pageColor"
					show-alpha
					:predefine="predefineColors">
				</el-color-picker>
			</el-form-item>
		</el-form>
	</div>

</template>

<script>
  export default {
    name: "PageSetting",
    props: {
      settingValue: {
        type: Object,
        default: () => {
          return {
            pageColor: '',
            pageType: '',
            pageName: '',
          }
        }
      }
    },
    data() {
      return {
        settingForm: {},
        pageTypeDict: [
          {
            label: '类型1',
            value: '1'
          },
          {
            label: '类型2',
            value: '2'
          }
        ],
        predefineColors: [
          '#000000',
          '#ff4500',
          '#ff8c00',
          '#ffd700',
          '#90ee90',
          '#00ced1',
          '#1e90ff',
          '#c71585',
          'rgba(255, 69, 0, 0.68)',
          'rgb(255, 120, 0)',
          'hsv(51, 100, 98)',
          'hsva(120, 40, 94, 0.5)',
          'hsl(181, 100%, 37%)',
          'hsla(209, 100%, 56%, 0.73)',
          '#c7158577'
        ]
      }
    },
  }
</script>

<style scoped>

</style>
